<template>
  <Page class="bg-[#f5f5f5] min-h-screen pb-[120rpx]">
    <PageHeader title="用户信息" :showBack="true" />
    <view v-if="loading" class="flex justify-center items-center h-[400rpx]">
      <view class="text-[28rpx] text-[#999]">加载中...</view>
    </view>
    <view v-else>
      <!-- 基本信息 -->
      <view class="bg-white rounded-[24rpx] shadow-md mx-[24rpx] mt-[32rpx] p-[32rpx]">
        <view class="flex items-center mb-[24rpx]">
          <text class="text-[32rpx] font-bold text-[#165DFF]">基本信息</text>
        </view>
        <view class="flex items-center mb-[32rpx]">
          <image
            :src="user.avatar || 'http://www.dzgktf.com/templets/default/images/wtyt.jpg'"
            class="w-[120rpx] h-[120rpx] rounded-full mr-[24rpx] object-cover border-2 border-[#f0f0f0]"
          />
          <view>
            <view class="flex items-center mb-[8rpx]">
              <text class="text-[30rpx] font-bold text-[#222] mr-[12rpx]">{{ user.nickname || '-' }}</text>
              <view v-if="user.vip" class="bg-yellow-500 text-white px-[8rpx] py-[2rpx] rounded-[8rpx] text-[20rpx]">VIP</view>
            </view>
            <view class="flex items-center gap-x-[12rpx]">
              <text class="text-[24rpx] text-[#888]">ID: {{ user.id || '-' }}</text>
              <view class="px-[8rpx] py-[2rpx] rounded-[8rpx] text-[20rpx] font-medium"
                   :class="user.userType === '企业' ? 'bg-blue-500 text-white' : 'bg-green-500 text-white'">
                {{ user.userType || '-' }}
              </view>
            </view>
          </view>
        </view>
        <view class="mb-[24rpx]">
          <text class="block text-[28rpx] text-[#666] mb-[12rpx]">个人简介</text>
          <view class="text-[26rpx] text-[#333] min-h-[60rpx]">{{ user.bio || '暂无简介' }}</view>
        </view>
        <view class="mb-[24rpx]">
          <text class="block text-[28rpx] text-[#666] mb-[12rpx]">用户等级</text>
          <view class="text-[26rpx] text-[#333]">等级 {{ user.level || '1' }}</view>
        </view>
      </view>

      <!-- 技能掌握 -->
      <view v-if="user.skills && user.skills.length" class="bg-white rounded-[24rpx] shadow-md mx-[24rpx] mt-[24rpx] p-[32rpx]">
        <view class="flex items-center mb-[24rpx]">
          <text class="text-[32rpx] font-bold text-[#165DFF]">技能掌握</text>
        </view>
        <view class="flex flex-wrap gap-[16rpx]">
          <view
            v-for="(skill, index) in user.skills"
            :key="index"
            class="bg-[#e3f2fd] text-[#165DFF] px-[20rpx] py-[12rpx] rounded-[30rpx] text-[26rpx]"
          >
            {{ skill }}
          </view>
        </view>
      </view>

      <!-- 服务范围 -->
      <view v-if="user.services && user.services.length" class="bg-white rounded-[24rpx] shadow-md mx-[24rpx] mt-[24rpx] p-[32rpx]">
        <view class="flex items-center mb-[24rpx]">
          <text class="text-[32rpx] font-bold text-[#165DFF]">服务范围</text>
        </view>
        <view class="flex flex-wrap gap-[16rpx]">
          <view
            v-for="(service, idx) in user.services"
            :key="idx"
            class="bg-[#f5f5f5] text-[#666] px-[20rpx] py-[12rpx] rounded-[30rpx] text-[26rpx]"
          >
            {{ service.name }}
          </view>
        </view>
      </view>
      <view class="px-[32rpx] mt-[32rpx] box-border">
        <nut-button type="primary" class="flex !w-full my-4" @click="handleChat">聊天</nut-button>
      </view>
    </view>
  </Page>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import Taro from '@tarojs/taro';
import { post } from '@/utils/request';
import PageHeader from '@/components/PageHeader.vue';
import { showToast } from '@tarojs/taro';

/**
 * 查看他人信息页面
 * @description 只读展示头像、昵称、简介、技能、服务范围等
 * @performance 页面加载时自动请求，接口失败有提示
 */

const user = ref({
  id: '',
  avatar: '',
  nickname: '',
  bio: '',
  skills: [],
  services: [],
  level: '',
  userType: '',
  vip: false,
});
const loading = ref(true);

const handleChat = () => {
  Taro.navigateTo({
    url: `/pages/message/chat?userId=${user.value.id}`,
  });
};

onMounted(async () => {
  const {id} = Taro.getCurrentInstance().router?.params || {};
  if (!id) {
    showToast({ title: '缺少用户ID', icon: 'error' });
    loading.value = false;
    return;
  }
  try {
    loading.value = true;
    const res = await post('/my/otherPeople', { id });
    console.log("res ---====3", res);
    if (res && res.code === 0 && res.data) {
       const userData = res.data.columns;
       user.value = {
         id: userData.id || '',
         avatar: userData.avatar_url || '',
         nickname: userData.name || '',
         bio: userData.brief_introduction || '',
         skills: userData.skill ? userData.skill.split(',').filter((s: string) => s.trim()) : [],
         services: userData.serviceInfo.map((item: any) => item.columns),
         level: userData.level_id || '',
         userType: userData.user_type === 0 ? '个人' : '企业',
         vip: userData.vip === 1,
       };
    } else {
      showToast({ title: res.msg || '获取用户信息失败', icon: 'error' });
    }
  } catch (e) {
    showToast({ title: '网络错误', icon: 'error' });
  } finally {
    loading.value = false;
  }
});
</script>

<style scoped>

</style>